<template>
	<view class="u-p-20">
		<view v-if="details.showText !=='已关闭' && details.showText" style="height: 140rpx; background-color: var(--mainColor);" class="u-m-b-20">
			<view class="flex flex-column u-p-y-20 u-p-l-50">
				<template v-if="details.showText =='待支付'">
					<text class="u-p-y-10 text-white font-36 ">等待买家付款</text>
					<view class="flex align-center">
						<u-count-down class="u-m-x-8" color="#fff" separatorColor="#fff" :timestamp="details.duetime"
							font-size="26" bgColor="#27A5F9"></u-count-down>
					</view>
				</template>
				<template v-if="details.showText =='待发货'">
					<text class="u-p-y-10 text-white font-36 ">买家已付款，等待卖家发货</text>
				</template>
				<template v-if="details.showText =='待收货'">
					<text class="u-p-y-10 text-white font-36 ">卖家已发货，请确认签收</text>
				</template>
				<template v-if="details.showText =='已完成'">
					<text class="u-p-y-10 text-white font-36 ">交易已完成</text>
				</template>
				<template v-if="details.showText =='待评价'">
					<text class="u-p-y-10 text-white font-36 ">待评价</text>
				</template>
			</view>
		</view>
		<view class="u-p-20 bg-white rounded-20">
			<!-- <view class="position-relative">
        <u-image :src="$_BASE_IMG_API+'/images/orderdetailimage.png'" height="169rpx"></u-image>
        <view class="position-absolute top-0 left-0" style="height: 240rpx;top: 50%;">
          <view class="flex flex-column u-p-l-40" style="transform: translateY(-50%);">
            <template v-if="details.showText =='待支付'">
              <text class="u-p-y-10 text-white" >等待买家付款</text>
              <view class="flex align-center">
                <u-count-down class="u-m-x-8" color="#fff" separatorColor="#fff" :timestamp="details.duetime" font-size="26" bgColor="#fb8100"></u-count-down>
              </view>
            </template>
            <template v-if="details.showText =='待发货'">
              <text class="u-p-y-10 text-white">买家已付款，等待卖家发货</text>
            </template>
            <template v-if="details.showText =='待收货'">
              <text class="u-p-y-10 text-white">卖家已发货，请确认签收</text>
            </template>
            <template v-if="details.showText =='已完成'">
              <text class="u-p-y-10 text-white">交易已完成</text>
            </template>
            <template v-if="details.showText =='待评价'">
              <text class="u-p-y-10 text-white">待评价</text>
            </template>
          </view>
        </view>
      </view> -->
			<!-- 地址 -->
			<!-- <view class="flex align-center bg-white u-p-y-30">
        <u-icon name="../static/location.png" size="30"></u-icon>
        <view class="flex flex-column u-p-l-20">
          <view class="">
            <text>{{details.address.name}}</text>
            <text class="u-p-l-20 text-greey u-font-24">{{details.address.phone}}</text>
          </view>
          <text class="u-p-t-10">{{ details.address.province }}{{ details.address.city }}{{ details.address.area }}{{ details.address.detail }}</text>
        </view>
      </view> -->
			<view class="">
				<view v-for="(item,index) in details.store_info" :key="index">
					<block v-for="(v, indey) in item" :key="indey">
						<text class="flex font" v-if="indey == 0 && v.merch_name">{{v.merch_name}}</text>
						<order-item-list-good :item="v"></order-item-list-good>
						<view class="flex align-center justify-end text-center ">
							<text
								class="text-danger u-p-b-20">{{v.is_weiquan == 2?'维权成功': v.is_weiquan == 1?'维权中': ''}}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="">
				<dy-cell-item fontSize="26rpx" leftTitle="商品总价" :rightTitle="`¥${details.total_price}`"
					:rightIcon="false"></dy-cell-item>
				<dy-cell-item class="address" fontSize="26rpx" leftTitle="收货信息" :rightTitle="`${address}`"
					:rightIcon="false"></dy-cell-item>
				<dy-cell-item fontSize="26rpx" leftTitle="运费" :rightTitle="`${expressPrice}`"
					:rightIcon="false"></dy-cell-item>
				<dy-cell-item fontSize="26rpx" leftTitle="店铺优惠" :rightTitle="`-¥${details.coupon_price}`"
					:rightIcon="false"></dy-cell-item>
				<dy-cell-item leftColor="#333" fontSize="26rpx" leftTitle="实付金额" :rightTitle="`¥${details.pay_price}`"
					rightColor="#FF6600" :rightIcon="false"></dy-cell-item>
			</view>
			<view class="u-border-top u-p-t-20" v-if="details.text != '已完成'">
				<text class="flex font-weight-bold u-p-y-8">订单信息</text>
				<!-- <dy-cell-item leftTitle="订单备注" :rightTitle="details.note" :rightIcon="false"></dy-cell-item> -->
				<view class="flex align-center justify-between">
					<text class="text-greey u-m-t-15">订单备注</text>
					<view class="flex justify-end" style="width: 500rpx;">
						<text style="word-break: break-all;">{{details.note}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="flex-1">
						<dy-cell-item leftTitle="订单编号" :rightTitle="details.order_no" :rightIcon="false"></dy-cell-item>
					</view>
					<u-tag class="u-m-l-30" text="复制" size="mini" @click="$copy(details.order_no)"></u-tag>
				</view>
				<dy-cell-item leftTitle="创建时间" :rightTitle="details.creattime_text" :rightIcon="false"></dy-cell-item>
				<template v-if="details.receipt_time_text">
					<dy-cell-item leftTitle="成交时间" :rightTitle="details.receipt_time_text"
						:rightIcon="false"></dy-cell-item>
				</template>
				<template v-if="details.pay_img">
					<image src="" mode=""></image>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderCenterApi
	} from '@/api/serves.js'
	export default {
		data() {
			return {
				order_no: '',
				details: {
					address: {}
				},
			};
		},
		computed: {
			expressPrice() {
				if (this.details.express_price <= 0) return '包邮'
				return "¥" + this.details.express_price
			},
			address() {
				return this.details.address.name + ',' + this.details.address.phone + ',' + this.details.address.province +
					' ' + this.details.address.city + ' ' + this.details.address.area + ' ' + this.details.address.detail
			}
		},
		onLoad(options) {
			this.order_no = options.order_no
			this._orderDetail()
		},
		methods: {
			_orderDetail() {
				this.$ShowLoading()
				OrderCenterApi.orderDetail({
					order_no: this.order_no
				}).then(res => {
					this.$HideLoading()
					console.log('订单详情', res);
					if (res.code == 1) {
						this.details = res.data.order
					} else {
						this.$Toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		::v-deep .u-line-1 {
			overflow: initial;
			white-space: initial;
			text-overflow: initial;
			line-height: initial;
		}
	}
</style>